<template>
	<view class="index">
		<view class="form-wrapper">
			<view class="form-title">
				登录账号
			</view>
			<view class="form-item">
				<view class="label">
					姓名
				</view>
				<input type="text" maxlength="5" v-model="staffName" placeholder="请输入姓名" class="input" />
			</view>
			<view class="form-item">
				<view class="label">
					手机
				</view>
				<input type="number" maxlength="11" v-model="staffTel" placeholder="请输入手机" class="input" />
				<view class="btn" @click="getCode" :class="{'disabled':disabled || time < 60}">
					{{ btnText }}
				</view>
			</view>
			<view class="form-item">
				<view class="label">
					验证码
				</view>
				<input type="number" maxlength="6" v-model="code" placeholder="请输入验证码" class="input" />
			</view>
		</view>

		<view class="form-wrapper">
			<view class="form-title">
				功能权限
			</view>
			<view class="permission-item">
				<view class="label">
					销售：
				</view>
				<view class="permission-wrapper">
					<view class="item" :key="index" @click="selected(item)"
						v-for="(item,index) in permissions.cityWarehouseMarketing">
						<uni-icons v-if="item.selected" type="checkbox-filled" size="22" color="#F26022"></uni-icons>
						<uni-icons v-else type="circle" size="22" color="#bebebe"></uni-icons>
						<text>{{ item.label }}</text>
					</view>
				</view>
			</view>
			<view class="permission-item">
				<view class="label">
					物流：
				</view>
				<view class="permission-wrapper">
					<view class="item" @click="selected(item)" :key="index"
						v-for="(item,index) in permissions.cityWarehouseLogistics">
						<uni-icons v-if="item.selected" type="checkbox-filled" size="22" color="#F26022"></uni-icons>
						<uni-icons v-else type="circle" size="22" color="#bebebe"></uni-icons>
						<text>{{ item.label }}</text>
					</view>
				</view>
			</view>
			<view class="permission-item">
				<view class="label">
					结算：
				</view>
				<view class="permission-wrapper">
					<view class="item" @click="selected(item)" :key="index"
						v-for="(item,index) in permissions.cityWarehouseSettlement">
						<uni-icons v-if="item.selected" type="checkbox-filled" size="22" color="#F26022"></uni-icons>
						<uni-icons v-else type="circle" size="22" color="#bebebe"></uni-icons>
						<text>{{ item.label }}</text>
					</view>
				</view>
			</view>
			<view class="permission-item">
				<view class="label">
					管理：
				</view>
				<view class="permission-wrapper">
					<view class="item" @click="selected(item)" :key="index"
						v-for="(item,index) in permissions.cityWarehouseManagement">
						<uni-icons v-if="item.selected" type="checkbox-filled" size="22" color="#F26022"></uni-icons>
						<uni-icons v-else type="circle" size="22" color="#bebebe"></uni-icons>
						<text>{{ item.label }}</text>
					</view>
				</view>
			</view>
		</view>

		<view class="add-btn" @click="submit">
			保存
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				permissions: {
					cityWarehouseMarketing: [{
						label: '客户管理',
						code: 'customer:management',
						selected: true
					}, {
						label: '订货单',
						code: 'order:form',
						selected: true
					}, {
						label: '商品经营',
						code: 'product:selection',
						selected: true
					}],
					cityWarehouseLogistics: [{
						label: '运输管理',
						code: 'transportation:management',
						selected: false
					}, {
						label: '分货管理',
						code: 'scan:code:divide:goods',
						selected: false
					}, {
						label: '客户提货',
						code: 'customer:pick-up',
						selected: true
					}, {
						label: '提货单',
						code: 'bill:of:lading',
						selected: true
					}],
					cityWarehouseSettlement: [{
						label: '资金结算',
						code: 'fund:settlement',
						selected: false
					}, {
						label: '售后退款',
						code: 'refund:after:sale',
						selected: true
					}, {
						label: '违约扣款',
						code: 'fine:management',
						selected: true
					}],
					cityWarehouseManagement: [{
						label: '账号权限',
						code: 'account:authority',
						selected: false
					}, {
						label: '经营报表',
						code: 'operating:statement',
						selected: false
					}]
				},
				staffName: '',
				staffTel: '',
				code: '',
				time: 60,
				btnText: '获取验证码',
				timer: null,
				disabled: false
			}
		},
		mounted() {

		},
		methods: {
			selected(item) {
				item.selected = !item.selected;
			},
			async getCode() {
				if (this.time < 60 || this.disabled) return;
				if (!this.staffTel) {
					uni.showToast({
						title: '请输入手机号',
						duration: 2000,
						icon: "error"
					});
					return
				}
				const params = {
					"mobileNum": this.staffTel,
					//"templateCode": 'login_authCode'
				}
				this.disabled = true;
				const data = await this.$api.get('/app/workmate-sendCaptchaSms', params);
				if (data.code === 200) {
					this.disabled = false;
					uni.showToast({
						title: '信息已发送~'
					})
					this.time--;
					this.btnText = `${this.time}秒后再次获取`;
					this.timer = setInterval(() => {
						if (this.time > 1) {
							this.time--;
							this.btnText = `${this.time}秒后再次获取`;
						} else {
							this.time = 60;
							clearInterval(this.timer);
							this.timer = null;
							this.btnText = "获取验证码"
						}
					}, 1000)
				} else {
					this.disabled = false;
				}
			},
			async submit() {
				if (this.disabled) return
				console.log("this.staffName", this.staffName)
				if (!this.staffName) {
					uni.showToast({
						title: '请输入姓名',
						icon: 'none'
					})
					return
				}
				if (!this.staffTel) {
					uni.showToast({
						title: '请输入手机',
						icon: 'none'
					})
					return
				}
				if (!this.code) {
					uni.showToast({
						title: '请输入验证码',
						icon: 'none'
					})
					return
				}
				let permissionCode = [];
				this.permissions.cityWarehouseMarketing.forEach(item => {
					if (item.selected) {
						permissionCode.push(item.code)
					}
				})
				this.permissions.cityWarehouseSettlement.forEach(item => {
					if (item.selected) {
						permissionCode.push(item.code)
					}
				})
				this.permissions.cityWarehouseLogistics.forEach(item => {
					if (item.selected) {
						permissionCode.push(item.code)
					}
				})
				this.permissions.cityWarehouseManagement.forEach(item => {
					if (item.selected) {
						permissionCode.push(item.code)
					}
				})
				permissionCode = permissionCode.join()
				this.disabled = true;
				const data = await this.$api.post('/app/city-warehouse-staff/add', {
					code: this.code,
					staffName: this.staffName,
					staffTel: this.staffTel,
					permissionCode: permissionCode
				})
				if (data.code === 200) {
					var pages = getCurrentPages();
					var prevPage = pages[pages.length - 2];
					if (prevPage == undefined || prevPage == null) return;
					prevPage.$vm.getList();
					uni.navigateBack();
				} else {
					this.disabled = false;
				}
			},
		},
		components: {

		}
	}
</script>

<style lang="scss" scoped>
	.index {
		height: 100%;
		overflow: auto;
		padding: 0 24upx;

		.form-wrapper {
			background-color: #ffffff;
			border-radius: 10upx;
			padding: 30upx;
			margin-top: 20upx;

			.form-title {
				font-size: 32upx;
				font-weight: bold;
				margin-bottom: 20upx;
			}

			.form-item {
				display: flex;
				align-items: center;
				height: 90upx;
				border-bottom: 1upx solid #efefef;

				.label {
					font-size: 32upx;
					width: 140upx;
				}

				.input {
					flex: 1;
				}

				.btn {
					padding: 8upx 20upx;
					border: 1upx solid #bebebe;
					border-radius: 10upx;
				}
			}

			.permission-item {
				display: flex;
				margin-bottom: 20upx;

				.label {
					width: 120upx;
				}

				.permission-wrapper {
					flex: 1;
					display: flex;
					align-items: center;
					flex-wrap: wrap;

					.item {
						width: 50%;
						display: flex;
						align-items: center;
						margin-bottom: 10upx;
					}
				}
			}
		}

		.add-btn {
			position: fixed;
			height: 90upx;
			width: 100%;
			bottom: 0;
			left: 0;
			background-color: #F26022;
			color: #ffffff;
			display: flex;
			align-items: center;
			justify-content: center;
			z-index: 1;
		}
	}
</style>